import React, { PureComponent } from 'react';
import axios from 'axios';
import { LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Line ,ResponsiveContainer} from 'recharts';
import { useState ,useEffect} from 'react';
import { BarChart, Bar, Cell } from 'recharts';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import IconButton from '@mui/material/IconButton';
import SearchIcon from '@mui/icons-material/Search';
import RefreshIcon from '@mui/icons-material/Refresh';
import ListSubheader from '@mui/material/ListSubheader';
import List from '@mui/material/List';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Collapse from '@mui/material/Collapse';
import InboxIcon from '@mui/icons-material/MoveToInbox';
import DraftsIcon from '@mui/icons-material/Drafts';
import SendIcon from '@mui/icons-material/Send';
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import StarBorder from '@mui/icons-material/StarBorder';
import PersonIcon from '@mui/icons-material/Person';
import HistoryIcon from '@mui/icons-material/History';
import AccountBalanceIcon from '@mui/icons-material/AccountBalance';
import PaymentIcon from '@mui/icons-material/Payment';
import Box from '@mui/material/Box';
import Input from '@mui/material/Input';

const ariaLabel = { 'aria-label': 'description' };


const data = [
  {
    name: 'Page A',
    uv: -4000,
    
    amt: 2400,
  },
  {
    name: 'Page B',
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: 'Page C',
    uv: -2000,
    pv: 9800,
    amt: 2290,
  },
  {
    name: 'Page D',
    uv: 2780,
    pv: 3908,
    amt: 2000,
  },
  {
    name: 'Page E',
    uv: 1890,
    pv: 4800,
    amt: 2181,
  },
  {
    name: 'Page F',
    uv: 2390,
    pv: 3800,
    amt: 2500,
  },
  {
    name: 'Page G',
    uv: 3490,
    pv: 4300,
    amt: 2100,
  },
];



export default function Content() {
  const [open, setOpen] = React.useState(true);
  const [rows2, setRows2] = useState([]);

  const [formValues, setFormValues] = useState({
    amounts: ['', '', '', '', '', '']
  });

  const sell_stock = new FormData();
  //data_stock.append('stockname', '弘讯科技');





  useEffect(() => {
    axios.get('http://172.24.56.192:5000/index/perf_eval',{headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
              }})
                .then(function (response) {
                    // 这里是处理响应的代码
                  // var code = response['code']
                  setRows2(response.data['data']);
                  
                  console.log(response.data);
                    
                })
                .catch(function (error) {
                    // 这里是处理错误的代码
                  // window.location.href="https://www.baidu.com/"
                    console.log(error);
                  
                });},[]);
  
  

  return (
    <ResponsiveContainer width="100%" height="100%">
     <LineChart
                  width={820}
                  height={350}
                  data={rows2}
                  margin={{
                    top: 10,
                    right: 30,
                    left: 0,
                    bottom: 5,
                  }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="date" />
                  <YAxis domain={[0, 2]}/>
                  <Tooltip />
                  <Legend />
                  <Line type="monotone" dataKey="rate_of_return" stroke="#8884d8" activeDot={{ r: 8 }} />
                </LineChart>
    
  </ResponsiveContainer> 
  );
}

